<template>
  <div>
    <Card class="card clear-float">
      <p class="card-title" slot="title">{{$t('XQJG-VjJf63HrokcQVS6P')}}</p>
      <div class="operate-area">
        <div class="inline-item search-item">
          <Input v-model="username" @on-enter="searchTable">
            <span slot="prepend">{{$t('0_a5BTvbN5oM-HGGemU60')}}</span>
            <Button
              slot="append"
              icon="ios-search"
              @click="searchTable"
            ></Button>
          </Input>
        </div>
      </div>
      <Table :loading="loading" :columns="columns" :data="data"></Table>
      <!-- <Page
        class="page-component"
        size="small"
        :total="total"
        show-sizer
        show-elevator
        show-total
        :current.sync="current"
        :page-size="pageSize"
        :page-size-opts="pageSizeOpts"
        @on-change="changePage"
        @on-page-size-change="changePageSize"
      ></Page> -->
    </Card>
  </div>
</template>

<script>
import { getUserList } from '@/api/data2'

export default {
  name: 'station_user_query',
  data () {
    return {
      username: '',
      loading: false,
      columns: [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: this.$t('SWJNpRnfSDK7MAg0omTmr'),
          key: 'stationName',
          width: 150
        },
        {
          title: this.$t('XrbFVpmih0BLHqevO2AB5'),
          key: 'name',
          width: 110
        },
        {
          title: this.$t('b3M5_pCq-bRNMUOQDZ12v'),
          key: 'pwd'
        },
        {
          title: this.$t('E1Wq8Bq3oFK2U4Ulk9xK3'),
          key: 'status'
        },
        {
          title: this.$t('0_a5BTvbN5oM-HGGemU60'),
          key: 'name2',
          width: 120
        },
        {
          title: this.$t('Ovm8rzDQz5r0XPSBLWwXr'),
          key: 'phone',
          width: 110
        },
        {
          title: this.$t('1ff0cu90up6g41KkcEPjn'),
          key: 'email',
          width: 150
        },
        {
          title: this.$t('WC5XvJL9L013OIQ5wexMv'),
          key: 'lastLoginIP',
          width: 150
        },
        {
          title: this.$t('5TAaL9Lh6qHkqaNkG9MZi'),
          key: 'lastLoginTime',
          width: 150
        }
      ],
      data: [],
      total: 10,
      current: 1,
      pageSize: 5,
      pageSizeOpts: [5, 10, 15, 20],
      stationId: this.$route.params.id
    }
  },
  created () {
    this.queryTable()
  },
  computed: {
    isAdmin () {
      return this.$store.getters.isAdmin
    },
    isAgent () {
      return this.$store.getters.isAgent
    }
  },
  methods: {
    searchTable () {
      this.queryTable()
    },
    async queryTable ({
      current = this.current,
      pageSize = this.pageSize,
      search = this.username
    } = {}) {
      this.loading = true
      // this.current = current
      // this.pageSize = pageSize
      const { code, data, desc } = await getUserList({
        search: search,
        operatorid: this.$store.state.user.operatorId,
        stationid: this.stationId
      })
      if (code == 200) {
        let datalist = data.datalist || []
        datalist = datalist.map(d => {
          return _.assign({}, d, {
            stationName: '',
            status: '',
            name2: '',
            phone: '',
            email: '',
            lastLoginIP: '',
            lastLoginTime: ''
          })
        })
        this.data = datalist
      } else {
        this.$Message.error(desc)
      }
      // this.total = res.total
      this.loading = false
    },
    changePage (num) {
      this.queryTable({ current: num })
    },
    changePageSize (num) {
      this.queryTable({ pageSize: num })
    }
  }
}
</script>
